<template>
    <div>
        <div>
            <el-form ref="searchForm" :inline="true" :model="condition.search" label-suffix="" label-width="100px"
                     label-position="left" size="small">
                <el-row>
                    <el-col>
                        <el-form-item>
                            <el-button type="primary" @click="getData">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="reset">重置</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="exportExcel">导出</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-table
            id="mainTable"
            :data="tableData"
            size="small"
            header-cell-class-name="tableHeaderStyle"
            :row-class-name="tableRowClassName">
            <el-table-column label="序号" width="60">
                <template v-slot="scope">
                    <span>{{ (condition.page - 1) * condition.rows + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="name"
                label="门店名称">
            </el-table-column>
            <el-table-column
                prop="address"
                label="门店地址">
            </el-table-column>
            <el-table-column
                prop="shopId"
                label="门店ID">
            </el-table-column>
            <el-table-column
                prop="qrcodeGroupChatId"
                label="关联群活码">
            </el-table-column>
            <el-table-column
                prop="qrcodeEmployeeId"
                label="关联员工活码">
            </el-table-column>
            <el-table-column
                prop="linkFlag"
                :formatter="formatLinkFlag"
                label="设置状态">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间">
            </el-table-column>
            <el-table-column
                prop="updateTime"
                label="更新时间">
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
                align="center"
                width="80px">
                <template v-slot="scope">
                    <div>
                        <el-button @click="set(scope.row)" type="text" size="small" v-if="!scope.row.linkFlag">设置活码
                        </el-button>
                        <el-button @click="onDelete(scope.row)" type="text" size="small" v-else>删除设置</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            small
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="condition.page"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size.sync="condition.rows"
            layout="sizes, prev, pager, next"
            :total.sync="condition.total">
        </el-pagination>
        <el-dialog title="设置门店活码" width="30%" :visible.sync="setDialogVisible">
            <el-form :model="setForm" label-width="120px" size="small">
                <el-form-item label="关联群活码">
                    <el-button @click="selectGroupChatQrcodeDialogVisible = true" size="mini" type="plain"
                               v-if="selectedGroupChatQrcodes.length === 0">
                        点击选择
                    </el-button>
                    <el-button @click="selectGroupChatQrcodeDialogVisible = true" size="mini" type="success" v-else>
                        已选择{{ selectedGroupChatQrcodes.length }}个群活码
                    </el-button>
                </el-form-item>
                <el-form-item label="关联员工活码">
                    <el-button @click="selectEmployeeQrcodeDialogVisible = true" size="mini" type="plain"
                               v-if="selectEmployeeQrcodes.length === 0">
                        点击选择
                    </el-button>
                    <el-button @click="selectEmployeeQrcodeDialogVisible = true" size="mini" type="success" v-else>
                        已选择{{ selectEmployeeQrcodes.length }}个员工活码
                    </el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="setDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="setConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="选择群活码" width="50%" :visible.sync="selectGroupChatQrcodeDialogVisible" append-to-body>
            <work-qrcode-employee ref="groupChatQrcode" size="small" mode="select" :work-corp-id="workCorpId"
                                  :selected="selectedGroupChatQrcodes"></work-qrcode-employee>
            <div slot="footer" class="dialog-footer">
                <el-button @click="selectGroupChatQrcodeDialogVisible = false" :size="size">取 消</el-button>
                <el-button @click="selectGroupChantQrcodeConfirm" type="primary" :size="size">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="选择员工活码" width="50%" :visible.sync="selectEmployeeQrcodeDialogVisible" append-to-body>
            <work-qrcode-group-chat ref="employeeQrcode" size="small" mode="select" :work-corp-id="workCorpId"
                                    :selected="selectEmployeeQrcodes"></work-qrcode-group-chat>
            <div slot="footer" class="dialog-footer">
                <el-button @click="selectEmployeeQrcodeDialogVisible = false" :size="size">取 消</el-button>
                <el-button @click="selectEmployeeQrcodeConfirm" type="primary" :size="size">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {addWorkQrcodeShop, deleteWorkQrcodeShop, getShopByPage, getWorkQrcodeShopByPage} from '@/api/api'
import WorkQrcodeEmployee from "@/component/workwx/WorkQrcodeEmployee";
import WorkQrcodeGroupChat from "@/component/workwx/WorkQrcodeGroupChat";

export default {
    name: "WorkQrcodeShop",
    components: {WorkQrcodeEmployee, WorkQrcodeGroupChat},
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 10,
                total: 0,
                search: {}
            },
            // 表格数据
            tableData: [],

            // 设置对话框
            setDialogVisible: false,
            // 设置表单
            setForm: {},
            // 选中行
            selectedRow: {},

            selectGroupChatQrcodeDialogVisible: false,
            selectedGroupChatQrcodes: [],

            selectEmployeeQrcodeDialogVisible: false,
            selectEmployeeQrcodes: [],
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        size: {
            type: String,
            default: 'small'
        },
        qrcodeGroupId: String,
        workCorpId: String
    },
    methods: {
        selectGroupChantQrcodeConfirm() {
            this.selectedGroupChatQrcodes = this.$refs.groupChatQrcode.qrcodeSelected;
            this.selectGroupChatQrcodeDialogVisible = false;
            this.setForm.groupChatQrcodes = this.selectedGroupChatQrcodes;
        },
        selectEmployeeQrcodeConfirm() {
            this.selectEmployeeQrcodes = this.$refs.employeeQrcode.qrcodeSelected;
            this.selectEmployeeQrcodeDialogVisible = false;
            this.setForm.employeeQrcodes = this.selectEmployeeQrcodes;
        },
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        // 格式布尔值
        formatBoolean: function (row, column, cellValue) {
            if (cellValue) {
                return "是";
            } else {
                return "否";
            }
        },
        formatStatus: function (row, column, cellValue) {
            if (cellValue == '0') {
                return "关闭";
            } else if (cellValue == '1') {
                return "开启";
            } else {
                return "未知";
            }
        },
        formatLinkFlag: function (row, column, cellValue) {
            if (cellValue) {
                return "已设置";
            } else {
                return "未设置";
            }
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        exportExcel: function () {
            this.GLOBAL.exportExcel('#mainTable', '数据.xlsx');
        },
        set: function (row) {
            this.setDialogVisible = true;
            this.selectedRow = row;
            // 深拷贝
            this.setForm = Object.assign({}, row);
            this.setForm.shopId = row.id;
            this.setForm.qrcodeGroupId = this.qrcodeGroupId;
        },
        setConfirm: function () {
            if (this.selectedGroupChatQrcodes.length === 0) {
                this.$message({
                    type: 'error',
                    message: '请选择1个群活码'
                });
                return;
            } else if (this.selectedGroupChatQrcodes.length === 1) {
                this.setForm.qrcodeGroupChatId = this.selectedGroupChatQrcodes[0].id;
            } else {
                this.$message({
                    type: 'error',
                    message: '最多只能选择1个群活码'
                });
                return;
            }
            if (this.selectEmployeeQrcodes.length === 0) {

            } else if (this.selectEmployeeQrcodes.length === 1) {
                this.setForm.qrcodeEmployeeId = this.selectEmployeeQrcodes[0].id;
            } else {
                this.$message({
                    type: 'error',
                    message: '最多只能选择1个员工活码，可以不选'
                });
                return;
            }
            addWorkQrcodeShop(this.setForm).then(data => {
                if (data.respCode == 1000) {
                    this.setDialogVisible = false;
                    this.getData();
                }
            });
        },
        onDelete: function (row) {
            this.$confirm('请确认是否删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteWorkQrcodeShop({id: row.linkId}).then(data => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        addOrUpdateConfirm: function () {
            if (this.addOrUpdateDialogTitle == '新增') {
                this.add();
            } else if (this.addOrUpdateDialogTitle == '编辑') {
                this.update();
            }
        },
        // 获取表格数据
        getData: function () {
            // 获取门店数据
            getShopByPage(this.condition).then(data => {
                this.condition.total = data.body.total;
                let shops = data.body.rows;
                let param = {};
                param.page = 1;
                param.rows = 100;
                param.qrcodeGroupId = this.qrcodeGroupId;
                getWorkQrcodeShopByPage(param).then(data => {
                    let qrcodes = data.body.rows;
                    for (let i = 0; i < shops.length; i++) {
                        shops[i].linkFlag = false;
                        shops[i].shopId = shops[i].id;
                        for (let j = 0; j < qrcodes.length; j++) {
                            if (shops[i].id === qrcodes[j].shopId) {
                                shops[i].linkFlag = true;
                                shops[i].linkId = qrcodes[j].id;
                                shops[i].qrcodeGroupChatId = qrcodes[j].qrcodeGroupChatId;
                                shops[i].qrcodeEmployeeId = qrcodes[j].qrcodeEmployeeId;
                                break;
                            }
                        }
                    }
                    this.tableData = shops;
                });
            });
        },
    },
    created() {
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
